
var mychart1 =echarts.init(document.getElementById('charts1'));
var mychart2 = echarts.init(document.getElementById('charts2'));
var mychart7 =echarts.init(document.getElementById('charts7'));



var dataAll = [];
var yAxisData = [];
var purl ="http://localhost:2018/ajax/ImpPosAjax/station_static_pie";
var url = "/ajax/ShowAjax/station_number";

var option1,option7,option2;
var send_months=[0,0,0,0,0,0,0,0,0,0,0,0],over_months=[0,0,0,0,0,0,0,0,0,0,0,0];



function autoAction(mychart,total){
    var tooltip = mychart.tooltip;
    var obj = {"mychart":mychart,"total":total,"timer":0,"count":0}


    autoTip(obj);

    var zRender = mychart.getZr();
//mousemove和mouseout总是成对出现，而且out先出现。。。。所以没法解决鼠标hover时暂停自动tip的效果
    zRender.on('mousemove', function (param) {
        console.log('move')
        if (obj.timer) {
            clearInterval(obj.timer);
            obj.timer = 0;
        }
    });
    zRender.on('mouseout', function (param) {
        console.log('OUT');
        if (param.event) {
            //判断坐标是否在图表上，然后在处理应该可以实现
            if (!obj.timer) {
                autoTip(obj);
            }
        }
    });
}

//自动显示
function autoTip(obj) {
    obj.timer = setInterval(function () {
        var curr = obj.count % obj.total;

        //3.0以上版本的showTip使用方式
       obj.mychart.dispatchAction({type: 'showTip', seriesIndex: 0, dataIndex: curr});
        //tooltip.showTip({seriesIndex: '0', dataIndex: curr});
        obj.count += 1;
    }, 1800);
}

function countNumer(){
    var options = {
        useEasing: true,
        useGrouping: true,
        separator: ',',
        decimal: '.',
    };
    count_number1 = new CountUp('count-number1', 0, 0, 0, 1.5, options);
    count_number2 = new CountUp('count-number2', 0, 0, 0, 1.5, options);
    count_number3 = new CountUp('count-number3', 0, 0, 0, 1.5, options);
    count_number4 = new CountUp('count-number4', 0, 0, 0, 1.5, options);

    count_number1.start();
    count_number2.start();
    count_number3.start();
    count_number4.start();
}

function allPhyStart(value){
    value.arrs.forEach(function (item) {
        var arr = item.split(",");
        yAxisData.push(arr[0]);
        dataAll.push(arr[1]);
    });
    value.send_months.forEach(function (data) {
        send_months[data[0]-1] = data[1];
    });
    value.over_months.forEach(function (data) {
        over_months[data[0]-1] = data[1];
    });

    option1 = {
        /*backgroundColor:'#fff',*/
        tooltip: { },
        series: [
            {
                name: '上报率',
                type: 'pie',
                radius: ['40%', '55%'],
                center:['80%','50%'],
                /*color:'#C23531',*/
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(
                            0,0,0,1,
                            [
                                {offset:0, color: '#00b0ff'},
                                {offset:0.8, color: '#7052f4'},

                            ]
                        )
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: value.report_over,
                        name: '上报数',
                        label: {
                            normal: {
                                formatter: '{d} %',
                                textStyle: {
                                    fontSize: 18,
                                    color:'#027eff'
                                }
                            }
                        },
                        tooltip:{
                            trigger: 'item',
                            formatter: "{a}=({b}/上报数)*100%<br/> 上报数 : {c}"
                        }
                    },
                    {
                        value: value.report_send+value.report_accept,
                        name: '未上报数',
                        label: {
                            normal: {
                                formatter: '\n完成上报',
                                textStyle:{
                                    color:'#027eff'
                                },
                            }
                        },
                        tooltip:{
                            trigger: 'item',
                            formatter: "{a}=(未上报数/事件发生数)*100%<br/> {b} : {c}"
                        },
                        itemStyle: {
                            normal: {
                                color: '#DBDBDB'
                            },
                            emphasis: {
                                color: '#DBDBDB'
                            }
                        },
                    }
                ]
            },
            {
                name: '处理率',
                type: 'pie',
                radius: ['40%', '55%'],
                center:['50%','50%'],
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(
                            0,0,0,1,
                            [
                                {offset:0, color: '#00b0ff'},
                                {offset:0.8, color: '#4CC76D'},

                            ]
                        )
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [
                    {
                        value: value.report_accept,
                        name: '处理率',

                        label: {
                            normal: {
                                formatter: '{d} %',
                                textStyle: {
                                    fontSize: 18,
                                    color:'#027eff'
                                }
                            }
                        },
                        tooltip:{
                            trigger: 'item',
                            formatter: "{a}=({b}/事件处理数)*100%<br/> 事件处理数 : {c}"
                        }
                    }, {
                        value: value.report_send,
                        name: '未处理数',
                        label: {
                            normal: {
                                formatter: '\n未处理率',
                                textStyle:{
                                    color:'#027eff'
                                },
                            }
                        },
                        tooltip:{
                            trigger: 'item',
                            formatter: "{a}=(未处理数/事件发生数)*100%<br/> {b} : {c}"
                        },
                        itemStyle: {
                            normal: {
                                color: '#DBDBDB'
                            },
                            emphasis: {
                                color: '#DBDBDB'
                            }
                        },
                    }]
            },{
                name: '结案率',
                type: 'pie',
                radius: ['40%', '55%'],
                center:['20%','50%'],
                itemStyle:{
                    normal:{
                        color:new echarts.graphic.LinearGradient(
                            0,0,0,1,
                            [
                                {offset:0, color: '#00b0ff'},
                                {offset:0.8, color: '#96d668'},

                            ]
                        )
                    }
                },
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: value.report_over,
                    name: '结案数',
                    label: {
                        normal: {
                            formatter: '{d} %',
                            textStyle: {
                                fontSize: 18,
                                color:'#027eff'
                            }
                        }
                    },
                    tooltip:{
                        trigger: 'item',
                        formatter: "{a}=({b}/结案数)*100%<br/> 结案数 : {c}"
                    }

                }, {
                    value: value.report_send+value.report_accept,
                    name: '未结案数',
                    label: {
                        normal: {
                            formatter: '\n未结案数',
                            textStyle:{
                                color:'#027eff'
                            },
                        }
                    },
                    tooltip:{
                        trigger: 'item',
                        formatter: "{a}=(未结案数/事件发生率)*100%<br/> {b} : {c}"
                    },
                    itemStyle: {
                        normal: {
                            color: '#DBDBDB'
                        },
                        emphasis: {
                            color: '#DBDBDB'
                        }
                    },
                }]
            }]
    };
    option2 = {
        title : {
            text: '每月完成工作量',
            textStyle:{
                color:'#fff'
            }
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['上报数','结案数'],
            textStyle:{
                color:'#fff'
            }
        },
        toolbox: {
            show : true,
            feature : {
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [{
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                }
            }
        }],
        yAxis : [
            {
                type : 'value',
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                    }
                }
            }
        ],
        series : [
            {
                name:'上报数',
                type:'bar',
                itemStyle: {
                    normal: {
                        show: true,
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#7049f0'
                        }, {
                            offset: 1,

                            color: '#9A32CD'
                        }]),
                        /*  barBorderRadius: 15,
                          borderWidth: 0,*/
                    }
                },
                data:send_months,
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'结案数',
                type:'bar',
                itemStyle: {
                    normal: {
                        /*     barBorderRadius: 15,*/
                        color: new echarts.graphic.LinearGradient(
                            0, 0, 0, 1, [{
                                offset: 0,
                                color: '#00feff'
                            },
                                {
                                    offset: 0.5,
                                    color: '#027eff'
                                },
                                {
                                    offset: 1,
                                    color: '#0286ff'
                                }
                            ]
                        )
                    }
                },
                data:over_months,
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
    option7 = {
        color:['#019BD9','#7049f0','#3ED7FF','#22B589','#E6795E'],
        title:[
            {text:"各渠道投诉占比",x: '2%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
            {text:"投诉原因TOP10",x: '40%', y: '1%',textStyle:{color:"#fff",fontSize:"14"}},
            {text:"各级别投诉占比",x: '2%', y: '50%',textStyle:{color:"#fff",fontSize:"14"}},
        ],
        grid: [
            {x: '50%', y: '7%', width: '45%', height: '90%'},
        ],
        tooltip: {
            formatter: '{b} ({c})'
        },
        xAxis: [
            {gridIndex: 0, axisTick: {show:false},axisLabel: {show:false},splitLine: {show:false},axisLine: {show:false }},
        ],
        yAxis: [
            {  gridIndex: 0, interval:0,data:yAxisData.reverse(),
                axisTick: {show:false}, axisLabel: {show:true},splitLine: {show:false},
                axisLine: {show:true,lineStyle:{color:"#fff"}},
            }
        ],
        series: [
            {
                name: '投诉原因TOP10',
                type: 'bar',xAxisIndex: 0,yAxisIndex: 0,barWidth:'45%',
                itemStyle:{normal:{color:new echarts.graphic.LinearGradient(
                            1, 0, 0, 0, [{
                                offset: 0,
                                color: '#7049f0'
                            },
                                {
                                    offset: 0.5,
                                    color: '#027eff'
                                },
                                {
                                    offset: 1,
                                    color: '#00B1FF'
                                }
                            ])}},
                label:{normal:{show:true, position:"right",textStyle:{color:"#9EA7C4"}}},
                data: dataAll.sort(),
            },
            {
                name: '各渠道投诉占比',
                type: 'pie',
                radius : '30%',
                center: ['22%', '25%'],
                data:[
                    {value:335, name:'客服电话'},
                    {value:310, name:'奥迪官网'},
                    {value:234, name:'媒体曝光'},
                    {value:135, name:'质检总局'},
                    {value:105, name:'其他'},
                ],
                labelLine:{normal:{show:false}},
                itemStyle: {normal: {label:{ show: true,  formatter: '{b} \n ({d}%)', textStyle:{color:'#fff'}} },},
            },
            {
                name: '各级别投诉占比',
                type: 'pie',
                radius : '30%',
                center: ['22%', '75%'],
                labelLine:{normal:{show:false}},
                data:[
                    {value:335, name:'A级'},
                    {value:310, name:'B级'},
                    {value:234, name:'C级'},
                    {value:135, name:'D级'},
                ],
                itemStyle: {normal: {label:{ show: true,  formatter: '{b} \n ({d}%)', textStyle:{color:'#fff'}} },},
            },


        ]
    };

    mychart1.setOption(option1);
    mychart2.setOption(option2);
    mychart7.setOption(option7);

    /*刷新数字*/
    count_number1.update(value.report_send);
    count_number2.update(value.report_accept);
    count_number3.update(value.report_over);
    count_number4.update(value.report_all);
}

$(window).ready(function () {
    countNumer();

    $.getJSON(url,function (value) {

        allPhyStart(value);
        //自动运动
        autoAction(mychart2,option2.xAxis[0].data.length);
        autoAction(mychart7,option7.yAxis[0].data.length);
    });


    //更新数据

    setInterval(function () {
        $.getJSON(url,function (value) {


            /*刷新饼图*/
            var option =  mychart1.getOption();
            option.series[0].data[0].value = value.report_over;
            option.series[0].data[1].value = value.report_send+value.report_accept;

            option.series[1].data[0].value = value.report_accept;
            option.series[1].data[1].value = value.report_send;

            option.series[2].data[0].value = value.report_over;
            option.series[2].data[1].value = value.report_send+value.report_accept;
            mychart1.setOption(option);

            /*刷新线形图*/
            value.send_months.forEach(function (data) {
                send_months[data[0]-1] = data[1];
            });
            value.over_months.forEach(function (data) {
                over_months[data[0]-1] = data[1];
            });

            option = mychart2.getOption();
            option.series[0].data = send_months;
            option.series[1].data = over_months;
            mychart2.setOption(option);


            value.arrs.forEach(function (item) {
                var arr = item.split(",");
                yAxisData.push(arr[0]);
                dataAll.push(arr[1]);
            });

        });
    },4000);

});
$(window).resize(function () {
    mychart1.resize();
    mychart2.resize();
    mychart7.resize();
});